import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Window 2.0
import QtQuick.Dialogs 1.0
import QtQuick.XmlListModel 2.0
import QtQuick.Controls.Styles 1.0


ApplicationWindow {
    title: qsTr("DTwenty Campaign Tool")
    width: 1200
    height: 800


    XmlListModel {
        id: mainModel
    }

    XmlListModel {
        id: characterClassesModel
        source: mainModel.source

        query: "/Campaign/CharacterClasses/CharacterClass"

        XmlRole { name: "characterClassName"; query: "@name/string()" }
    }

    XmlListModel {
        id: campaignSkillsModel
        source: mainModel.source

        query: "/Campaign/Skills/Skill"

        XmlRole { name: "skillName"; query: "@name/string()"; isKey: true }
    }

    FileDialog {
        id: fileOpenDialog
        nameFilters: [ "Xml Files (*.xml)" ]
        onAccepted: { mainModel.source = fileUrl; }
    }

    FileDialog {
        id: fileSaveDialog
        nameFilters: [ "Xml Files (*.xml)" ]
//        onAccepted: fileLoader.saveAs(fileUrl)
    }

    Action {
        id: openAction
        text: "&Open..."
        shortcut: "CTRL+O"
        onTriggered: fileOpenDialog.open()
    }

    Action {
        id: saveAsAction
        text: "&Save As..."
        shortcut: "CTRL+SHIFT+S"
        onTriggered: fileSaveDialog.open()
    }


    MainMenu {
        id: mainMenu
    }

    menuBar: mainMenu

    ListView {
        id: charactersView
        model: characterClassesModel
        width: 150
        delegate: Button {
            text: characterClassName
            width: 150
        }

        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
    }

    Flipable {

        ListView {
            id: campaignSkillsView
            model: campaignSkillsModel
            anchors.top: parent.top
            anchors.left: charactersView.right
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            delegate: TextField {
                text: skillName
                anchors.left: parent.left
                anchors.right: parent.right
                onAccepted: {

                }

                style: TextFieldStyle {
                    selectionColor: "lightsteelblue"
                }
            }

            /*
        delegate: Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right

            height: 25
            color: "lightgray"
            border.color: "black"
            border.width: 1

            TextInput {
                text: skillName;
                anchors.verticalCenter: parent.verticalCenter;
                anchors.left: parent.left;
                anchors.leftMargin: 6
            }
        }
        */

        }
    }



}
